<template>
  <view class="tab-content">
    <view
      class="top-bar flexr align-center"
      :style="{
        height: `${sysStore.navBarHeight}px`,
        paddingTop: `${sysStore.statusBarHeight}px`,
      }"
    >
      <view class="top-bar-item flexr align-center" @click="showAccPicker">
        <image
          class="user"
          :src="BuildImageUrl(currentAccount.headPortrait)"
        ></image>
        <text>{{ currentAccount.customerName }}</text>
      </view>
    </view>
    <view class="tabs flexr justify-center">
      <view class="tab" :class="{ active: tab == 0 }" @click="tab = 0">
        历史验光单
      </view>
      <view class="tab" :class="{ active: tab == 1 }" @click="tab = 1">
        眼健康趋势图
      </view>
    </view>

    <view v-if="tab == 0" class="scroll-view">
      <historyDoc></historyDoc>
    </view>
    <view v-if="tab == 1" class="scroll-view">
      <healthCharts></healthCharts>
    </view>

    <uni-popup
      ref="accountPickerRef"
      type="bottom"
      background-color="#fff"
      border-radius="30rpx 30rpx 0 0"
      :mask-click="false"
    >
      <accountPicker
        @onCancel="onCancelAccountPicker"
        @onConfirm="onConfirmAccountPicker"
      ></accountPicker>
    </uni-popup>
  </view>
</template>

<script setup>
import { BuildImageUrl } from "@/api/api";
import { useSysStore } from "@/store/sys.js";
import { ref, computed } from "vue";
import accountPicker from "@/widgets/accountPicker.vue";
import historyDoc from "./historyDoc.vue";
import healthCharts from "./healthCharts.vue";
import { useUserStore } from "@/store/user";
import { onLoad, onShow } from "@dcloudio/uni-app";
const userStore = useUserStore();
const sysStore = useSysStore();
const accountPickerRef = ref(null);
const tab = ref(0);
onShow(() => {
  if (userStore.isLogin) {
    userStore.getCustomerChilds();
  } else {
    uni.switchTab({
      url: "/pages/appointment/appointment",
      success: () => {
        console.log("跳转到预约页");
        uni.navigateTo({
          url: "/subpages/account/login",
        });
      },
      fail() {
        console.error("跳转到预约页失败");
      },
    });
  }
});
const currentAccount = computed(() => {
  return userStore.customerChilds.find((item) => item.customerId === userStore.selectCustomerForOptometry) || {};
});
function showAccPicker() {
  accountPickerRef.value?.open("bottom");
}
function onCancelAccountPicker() {
  accountPickerRef.value?.close();
}
function onConfirmAccountPicker() {
  accountPickerRef.value?.close();
}
</script>

<style lang="scss">
.tab-content {
  .top-bar {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 20rpx;
    background-color: white;
    .top-bar-item {
      align-self: stretch;
      font-size: 35rpx;
      // padding: 0 20rpx;
      color: $text-color1;
      .user {
        margin-right: 20rpx;
        width: 46rpx;
        height: 46rpx;
        border-radius: 100rpx;
      }
    }
  }
  .tabs {
    color: $text-color2;
    .tab {
      align-self: stretch;
      line-height: 84rpx;
      height: 84rpx;
      width: 250rpx;
      text-align: center;
      &.active {
        color: $primary-color;
      }
    }
  }
  .scroll-view {
    overflow-y: scroll;
    padding: 0 26rpx 26rpx;
  }
}
</style>
